<template>
  <div class="viewcontainer" v-if="dataset">
    <el-dialog
      :title="detailTitle"
      :visible.sync="detailFormVisible"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form>
        <el-form-item label="货架名称">
          <el-select
            class="adjustSelect"
            v-model="adjustData.toShelvesDesc"
            placeholder="请选择货架"
            ref="selectReport"
          >
            <el-option
              class="adjustTree"
              :value="adjustData.toShelvesId"
              :label="adjustData.toShelvesDesc"
            >
              <el-tree
                :highlight-current="true"
                :props="treeProps"
                node-key="FID"
                @node-click="handleNodeClick"
                ref="tree"
                :expand-on-click-node="false"
                :load="query"
                lazy
              ></el-tree>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickOk">确 定</el-button>
      </span>
    </el-dialog>
    <el-row class="view-header">
      <el-col :span="22">
        <hi-lquery v-bind="queryPanel" :target="dataset"></hi-lquery>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="batchAdjust">批量转移</el-button>
      </el-col>
    </el-row>
    <el-row class="view-main">
      <el-table
        ref="dataTable"
        :data="dataset.data"
        height="100%"
        @selection-change="handleSelectionChange"
        style="width: 100%"
        v-loading="dataset.loading"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column type="index" width="50" />
        <el-table-column prop="FGOODSNUMBER" label="店内编码" width="160" />
        <el-table-column prop="FBARCODE" label="条形码" width="160" />
        <el-table-column prop="FDESC" label="通用名称" width="160" />
        <el-table-column prop="FSHOPDESC" label="店铺" width="160" />
        <el-table-column prop="FSHELVESDESC" label="货架名称" width="160" />
        <el-table-column prop="FBRAND" label="品牌" width="160" />
        <el-table-column prop="FCLASS" label="类别" width="160" />
        <el-table-column prop="FDRUGCLASS" label="药品分类" width="160" />
        <el-table-column prop="FSPEC" label="规格" width="160" />
        <el-table-column prop="FAMOUNT" label="数量" width="100" />
        <el-table-column prop="FUNIT" label="单位" width="100" />
        <el-table-column prop="FPRICE" label="单价" width="100">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.FPRICE) }}
          </template>
        </el-table-column>
        <el-table-column prop="FPROADDRESS" label="生产地址" width="200">
          <template slot-scope="scope">
            <div class="text-truncate" :title="scope.row.FPROADDRESS">
              {{ scope.row.FPROADDRESS }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="FCREATEDATE" label="创建日期" width="160" />
      </el-table>
    </el-row>
    <el-row class="view-footer pagebar">
      <hi-pagination
        background
        :total="dataset.total"
        :target="dataset"
      ></hi-pagination>
    </el-row>
  </div>
</template>

<script>
import {
  HiPagination,
  HiLquery,
  HiVquery,
  DataSetContainer,
  HiForm,
  utils,
  dataHelper,
} from "hi-ui";
import viewBase from "@/views/base";
import storeQueryCfg from "@/views/store/query/dataset";
export default {
  name: "querylist",
  extends: viewBase,
  components: {
    HiPagination,
    HiLquery,
    HiVquery,
    HiForm,
  },
  data() {
    let datasetCfg = Object.assign({}, storeQueryCfg, {
      action: "autoAction",
    });
    return {
      //数据桥梁
      dataBridge: new Map(),
      detailFormVisible: false,
      dataset: null,

      //查询面板配置
      queryPanel: {
        columnsTotal: 4,
        fields: [
          {
            element: "el-input",
            label: "店内编码",
            name: "FGOODSNUMBER",
          },
          {
            element: "el-input",
            label: "通用名称",
            name: "FDESC",
          },
          {
            element: "el-input",
            label: "店铺",
            // name: "FSHOPDESC",
            name: "FSHOPDESCID",
            element: "hi-select-grid",
            required: true,
            props: {
              selectOption: {
                loading: true,
                multiple: false,
                clearable: true,
                filterable: true,
                "allow-create": true,
                "collapse-tags": true,
              },
              lookup: {
                modelFile: "database/shop/dataset/ShopEntity.xml",
                label: "FDESC",
                filtername: "FDESC",
                tableprops: {
                  // border:true,
                  hideRowBorder: true,
                  stripe: true,
                  "show-header": false,
                  //fit:false,
                  size: "mini",
                  "max-height": 400,
                },
                returnFields: {
                  FSHOPDESCID: "FNUMBER",
                  // FSHOPDESC: "FDESC",
                },
                columns: [
                  {
                    name: "FDESC",
                    label: "通用名称",
                  },
                ],
              },
            },
          },
          {
            name: "goodsState",
            element: "el-select",
            label: "商品状态",
            value: "",
            props: {
              placeholder: "请选择",
            },
            children: [
              {
                element: "el-option",
                props: { label: "全部", value: "" },
              },
              {
                element: "el-option",
                props: { label: "已上架", value: "on" },
              },
              {
                element: "el-option",
                props: { label: "未上架", value: "off" },
              },
            ],
          },
        ],
      },
      //数据集配置
      datasetCfg: datasetCfg,
      total: 100,
      multipleSelection: [],
      detailTitle: "转移到其他货架",
      editData: {},
      modleFilePath: "shelves/dataset/ShelvesEntity.xml",
      adjustData: {
        toShelvesId: null,
        toShelvesDesc: null,
        toShopId: null,
      },
      treeProps: {
        label: "FDESC",
        isLeaf: (data, node) => {
          return data.FLEAF ? true : false;
        },
      },
      __resolve: null,
      __baseNode: null,
    };
  },
  model: {
    prop: "value",
    event: "valuechange",
  },
  props: {
    value: {
      type: Object,
    },
  },

  computed: {},
  watch: {
    "value.id": "valuechange",
    deep: true,
  },
  methods: {
    //批量
    batchAdjust() {
      let dataTable = this.$refs.dataTable;
      let _shopId = Array.from(
        new Set(
          this.multipleSelection.map((item) => {
            return item.FSHOPDESCID;
          })
        )
      );
      if (this.multipleSelection.length == 0) {
        this.$message.error("请选择库存数据!");
        return;
      }
      if (_shopId.length > 1) {
        this.$message.error(
          "多选数据包含不同店铺货架，无法批量转移，请选择同店铺货架!"
        );
        return;
      }
      this.adjustData.toShelvesId = null;
      this.adjustData.toShelvesDesc = null;
      this.adjustData.toShopId = _shopId[0];
      //刷新转移货架树
      if (this.__resolve) {
        this.__baseNode.childNodes = [];
        this.query(this.__baseNode, this.__resolve);
      }
      this.detailFormVisible = true;
    },
    //转移货架
    adjust(data, toShelvesId, toShelvesDesc) {
      let saveHelper = this.createSaveHelper(
        "store/query/dataset/QueryEntity.xml"
      );
      data.forEach((element) => {
        saveHelper.update(element, {
          FSHELVESID: toShelvesId,
          FSHELVESDESC: toShelvesDesc,
        });
      });
      saveHelper.save().then((res) => {
        this.$message({
          message: "转移成功",
          type: "success",
        });
        this.detailFormVisible = false;
        this.dataset.reload();
      });
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //转移货架--确定按钮
    clickOk() {
      let dataTable = this.$refs.dataTable;
      this.adjust(
        this.multipleSelection,
        this.adjustData.toShelvesId,
        this.adjustData.toShelvesDesc
      );
      this.adjustData.toShelvesId = null;
      this.adjustData.toShelvesDesc = null;
      this.adjustData.toShopId = null;
    },
    formatMoney(val) {
      return utils.number.format(val, "￥");
    },
    //左侧树节点点击后
    valuechange() {
      this.dataset.load();
    },
    //转移货架树节点查询
    query(node, resolve) {
      let pid = "-1";
      if (node.data) {
        pid = node.data.FID;
      }
      if (node.level === 0) {
        this.__resolve = resolve;
        this.__baseNode = node;
      }
      this.loading = true;
      let param = new dataHelper.queryHelper.Param();
      let where = new dataHelper.queryHelper.Where();
      if (pid == "-1") {
        where.eq("FPID", this.adjustData.toShopId);
      } else {
        where.eq("FPID", pid);
      }
      where.setPage(1, -1);
      param.where = where;
      this.queryEntity(where, this.modleFilePath, this.$route.path).then(
        (res) => {
          resolve(res.dataPack.rows);
        }
      );
    },
    //转移货架树节点点击事件
    handleNodeClick: function (node) {
      this.adjustData.toShelvesId = node.FID;
      this.adjustData.toShelvesDesc = node.FDESC;
      this.$refs.selectReport.blur();
    },
  },
  mounted() {
    this.dataset = this.createDataSet(this.datasetCfg);
    // this.dataset = this.$dsContainer.createDataSet(this.datasetCfg);
    this.dataset.on("beginload", (param) => {
      this.loading = true;
      if (!param) {
        let param = new dataHelper.queryHelper.Param();
        param.where = new dataHelper.queryHelper.Where();
      }
      let paramItem = param.where.items;
      if (paramItem.length) {
        for (let i = 0; i < paramItem.length; i++) {
          if (paramItem[i].name == "goodsState") {
            if (paramItem[i].value == "on") {
              param.where.noteq("FSHELVESID", "");
            } else if (paramItem[i].value == "off") {
              param.where.eq("FSHELVESID", "");
            }
            param.where.deleteItemByIndex(i);
            break;
          }
        }
      }
      if (this.value.id) {
        if (this.value.isStore) {
          param.where.eq("FSHOPDESCID", this.value.id);
        } else {
          param.where.eq("FSHELVESID", this.value.id);
        }
      }
    });
    this.dataBridge.set(this.dataset, ["dataTable", "detailForm"]);
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scope>
.adjustSelect {
  width: 50%;
}
.adjustTree {
  height: 130px;
  overflow: auto;
}
</style>
